<template>
  <div id="box">
    <box title="今日数据">
      <template v-slot:container>
          <div id="left">
            <!-- content -->
            <div class="Content">
              <div class="content">
                <!-- 左图 -->
                <div class="conten_left"><img src="../../assets/img/left_top/数据概况-恢复的_03.gif" alt=""></div>
                <div class="content-xh">
                  <div class="content_ty" v-for="(item, key) in imges" :key="key">
                    <div class="content_top">
                      <!-- 图标 -->
                      <div class="content_top_laft">
                        <img class="content_top_laft_img"  :src="item.img" alt="">
                      </div>
                      <!-- 数据 -->
                      <div class="contentt-top_text">
                        <div style="display: flex;   align-items: center;">
                          <span class="contentt-top_text_span1">
                            241.918
                          </span>
                          <span class="span_ty">次</span>
                        </div>
                        <!-- 下部数据 -->
                        <div class="contentt-top_button_data">
                          <div style="display: flex;   align-items: center;">
                            <p>昨日</p>
                            <span class="contentt-top_text_span2">131.151</span>
                            <img class="icon_ty" src="../../assets/img/left_top/上升箭头.gif" alt="">
                            <span class="contentt-top_text_span_data">47.12%</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 右图 -->
                <div class="conten_right"><img src="../../assets/img/left_top/数据概况-恢复的_05.gif" alt=""></div>
              </div>
              <div class="content_rigth"></div>
            </div>
          </div>
      </template>
    </box>
  </div>
</template>

<script>
import box from '../../components/slot_box/index.vue'
export default {
  name:'left_top',
  components:{
    box,
  },
  data() {
    return {
      time: "",
      // 图标
      imges:[
        { img:require('../../assets/img/left_top/数据概况-恢复的_07.gif') },
        { img:require('../../assets/img/left_top/数据概况-恢复的_06.gif') },
        { img:require('../../assets/img/left_top/数据概况-恢复的_08.gif') }
      ]
    };
  },
  created() {

  },
};
</script>
<style scoped>
#left{
  height: 540px;
  width: 870px;
  background-color: #012B54;
}
p{
  margin: 0;
  color: #CCCCCC;
  font-size: 25px;
  margin-right: 10px;
}
.header_top_text {
  color: #fff;
  margin-left: 38px;
  line-height: 72px;
  font-size: 36px;
}
/* 内容 */
.Content {
  height: 798px;
  width: 100%;
}
.content {
  /* margin-top: 52px; */
  align-items: center;
  display: flex;
  justify-content: space-between;
}
img{
  width: 100%;
  height: 100%;
}
/* 左图 */
.conten_left{
  width: 70px;
  height: 225px;
  margin-top: 100px;
}
/* 右图 */
.conten_right{
  width: 70px;
  height: 225px;
  margin-top: 100px;
}
.content-xh{
  margin-top: 52px;
  width: 600px;
  height: 437px;
}
/* 循环点 */
.content_top {
  box-shadow:5px 5px 30px 20px #0B4176 inset ;
  display: flex;
  margin-top: 16px;
  background-color: #01284F;
  border-radius: 135px;
  height: 135px;
  width: 600px;
}
.content_top_laft {
  padding-top: 9px;
  margin-left: 13px;
  border-radius: 50%;
  height: 117px;
  width: 117px;
  line-height: 135px;
}
.content_top_laft_img{
  border-radius: 50%;
  width: 100%;
  height: 100%;
}
/* 数据 */
.contentt-top_text{
  margin-top: 9px;
  margin-left: 40px;
  width: 325px;
  height: 117px;
}
.contentt-top_text_span1{
  font-size: 50px;
  color: #3196FA;
  font-weight: bold;
  letter-spacing: 3px;
}
.span_ty{
  margin-left: 15px;
  color: #3196FA;
  font-size: 25px;
}
/* 下部数据 */
.contentt-top_button_data{
  margin-top: 10px;
}
.contentt-top_text_span2{
  font-size: 25px;
  font-weight: bold;
  color: #3196FA;
}
.icon_ty{
  margin-left: 15px;
  width: 25px;
  height: 25px;
}
.contentt-top_text_span_data{
  color: #3196FA;
  font-weight: bold;
  font-size: 25px;
}
</style>
